<template>
  <div class="student-body">
        <!-- <h2 class="box_tit">
            <i class="icon icon1"></i>院校管理
            <i class="reti"></i>
        </h2>
        <div class="blank20"></div> -->
          <div class="components_searchs"  @keyup.enter="onSubmit">
              <el-form :inline="true" :model="queryFormData" class="demo-form-inline" label-width="80px">
                <el-form-item label="院校：">
                    <el-input clearable v-model="queryFormData.schoolName" placeholder="请输入院校"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
                </el-form-item>
              </el-form>
          </div>
          <div class="components_btns clearfix">
                <el-button type="primary" v-has="'school:add'" icon="el-icon-plus" size="mini" @click="showAddCollegeDialog">添加院校</el-button>
            </div>
        <div class="scrollBarX">
          <el-table :data="schoolList"  border stripe style="width: 100%">
            <el-table-column type="expand">
                  <template slot-scope="props">
                  <div class="scrollBarX">
                  <el-table :data="props.row.secondSchools"  border stripe style="width: 100%">
                        <el-table-column  prop="secondSchoolName"  label="学院" align="center"></el-table-column>
                        <el-table-column  prop="" label="操作" align="center" width="200">
                        <template slot-scope="scope">
                             <el-button v-has="'school:secondSchoolUpdate'" @click="editSecondSchool(scope.row,props.row.name)"  type="text" size="small">编辑</el-button>
                             <el-button v-has="'school:secondSchoolDelete'" @click="deleteSecondSchool(scope.row.id)"  type="text" size="small">删除</el-button>
                        </template>
                        </el-table-column>
                  </el-table>
                  </div>
                  </template>
            </el-table-column>

            <el-table-column  prop=""  label="院校" align="center">
              <template slot-scope="scope">
                  <el-button @click="showDetail(scope.row.id)"  type="text" size="small">{{scope.row.name}}</el-button>
              </template>
            </el-table-column>
            <el-table-column :formatter="formatterType"  prop="type" label="院校类型" align="center"></el-table-column>
            <el-table-column  prop="schoolManageName" label="校区主管" align="center"></el-table-column>
            <el-table-column  prop="officeName" label="所属区域" align="center"></el-table-column>
            <el-table-column  :formatter="getAddress"  label="地址" align="center"></el-table-column>
            <el-table-column  prop="" label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button v-has="'school:secondSchoolAdd'" @click="addSecondSchool(scope.row.id,scope.row.name)"  type="text" size="small">添加院系</el-button>
                             <el-button v-has="'school:update'" @click="editSchool(scope.row)"  type="text" size="small">编辑</el-button>
                             <el-button v-has="'school:delete'" @click="deleteSchool(scope.row.id)"  type="text" size="small">删除</el-button>
                        </template>
                        </el-table-column>
        </el-table>

        <div class="paginationBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizeArray"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
            </el-pagination>
        </div>
        </div>
        <CollegeAdd @refreshList="getSchoolWithSecondSchoolTree" ref="collegeAdd"></CollegeAdd>
        <SecondSchoolAdd @refreshList="getSchoolWithSecondSchoolTree"  ref="secondSchoolAdd"></SecondSchoolAdd>
        <CollegeDetail ref="CollegeDetail"></CollegeDetail>
  </div>
</template>
<script>
    import CollegeAdd from './CollegeAdd'
    import SecondSchoolAdd from './SecondSchoolAdd'
    import CollegeDetail from './CollegeDetail'

    export default{
        components: {
            CollegeAdd,
            SecondSchoolAdd,
            CollegeDetail
        },
        data(){
            return {
              queryFormData:{
                schoolName:''
              },
                schoolList:[],

                totalSize: 0,
                currentPage:1,
                pageSize:15,
                pageSizeArray:[15,30, 50, 100],
            }
        },
        created(){
            this.getSchoolWithSecondSchoolTree();
        },
        methods:{
            getSchoolWithSecondSchoolTree(){
                let self =this;
                self.axios(api.getSchoolWithSecondSchoolTree+ "?" + this.getAllQueryParams())
                .then(function (response) {
                    if (response.data.success) {
                        self.schoolList = response.data.data.list;
                    // console.log(JSON.stringify(response.data.data));
                    //页码列表
                    self.totalSize = response.data.data.total;
                    }else {
                        self.$message.error(response.data.msg);
                    }
                })
            },

            getAllQueryParams() {
                let vm = this;
                let params = [
                    'pageNum=' + this.currentPage,
                    'pageSize=' + this.pageSize,
                    'schoolName='+this.queryFormData.schoolName
                ].join('&');
                console.log(params);
                return params;
            },
            handleSizeChange(val){
                if(isNaN(val)){
                    val = 15;
                }
                this.pageSize = val;
                this.getSchoolWithSecondSchoolTree();
            },
            handleCurrentChange(val){
                if(val < 1){
                    val = 1;
                }
                this.currentPage = val;
                this.getSchoolWithSecondSchoolTree();
            },
            // 添加新院校窗口
            showAddCollegeDialog(){
                this.$refs.collegeAdd.showDialog();
            },
            //添加新院系窗口
            addSecondSchool(id,name){
              // console.log(JSON.stringify(id,name));
                this.$refs.secondSchoolAdd.showDialog(id,name);
            },
            editSchool(val){
                this.$refs.collegeAdd.editSchoolDetail(val);
            },
            showDetail(id){
              this.$refs.CollegeDetail.showDialog(id);
            },
            editSecondSchool(row,schoolName){
                this.$refs.secondSchoolAdd.editSecondSchoolDetail(row,schoolName);
            },
            formatterType(data){
                return data.type==1?'本科':'专科';
            },
            deleteSchool(id){
              let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.deleteSchool+id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.getSchoolWithSecondSchoolTree();
                        } else {
                            vm.$message.error(response.data.msg);
                        }

                    })
                },()=>{})
            },
            deleteSecondSchool(id){
                let vm = this;
                vm.$confirm('是否删除该条记录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.delete(api.deleteSecondSchool+id)
                    .then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                message: response.data.msg,
                                type: 'success',
                            });
                            vm.getSchoolWithSecondSchoolTree();
                        } else {
                            vm.$message.error(response.data.msg);
                        }

                    })
                },()=>{})
            },
            onSubmit(){
                this.getSchoolWithSecondSchoolTree();
            },
            resertSearch(){
                this.queryFormData = {
                  schoolName:''
                };
                this.currentPage=1;
                this.pageSize=30;
                this.getSchoolWithSecondSchoolTree();
            },
            getAddress(row, column, cellValue){
              if(!row.provinceName){
                row.provinceName = '';
              }
              if(!row.cityName){
                row.cityName = '';
              }
              return row.provinceName+" "+row.cityName;
            }
        }
    }
</script>
<style scoped>

.handBox{
    text-align: right;
    overflow: hidden;
    margin-bottom: 10px;
  }
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
table .el-table__body,table .el-table__footer,table  .el-table__header{
  border: 0;
}
</style>

